import request from '../../utils/request'
const app = getApp()

Page({
  data: {
    commodityList: [],       // 商品列表
    currentIndex: 0,         // 当前选中的商品索引
    currentCommodity: null,  // 当前选中的商品
    subImages: [],           // 当前商品的副图列表
    currentPage: 0,          // 当前副图页码
    pageSize: 9,             // 每页显示的图片数量
  },

  onLoad() {
    this.loadCommodityList()
  },

  // 加载商品列表
  loadCommodityList() {
    request({
      url: 'commodity-ai-image/qualified',
      method: 'GET'
    })
    .then(res => {
      if (res.code === 0) {
        const commodityList = res.data.map(item => ({
          ...item,
          displayName: `${item.commodityName}(${item.subImageCount})`
        }))
        
        this.setData({
          commodityList,
        }, () => {
          if (commodityList.length > 0) {
            this.loadCommodityDetails(0)
          }
        })
      } else {
        wx.showToast({
          title: '加载商品列表失败',
          icon: 'none'
        })
      }
    })
    .catch(err => {
      console.error('加载商品列表出错:', err)
      wx.showToast({
        title: '加载商品列表出错',
        icon: 'none'
      })
    })
  },

  // 加载商品详情和副图
  loadCommodityDetails(index) {
    const { commodityList } = this.data
    if (index < 0 || index >= commodityList.length) return
    
    const currentCommodity = commodityList[index]
    
    this.setData({
      currentIndex: index,
      currentCommodity,
      subImages: [],
      currentPage: 0
    })
    
    // 加载副图
    this.loadSubImages(currentCommodity.commodityId)
  },

  // 加载副图
  loadSubImages(commodityId) {
    request({
      url: `commodity-ai-image/${commodityId}/sub-images`,
      method: 'GET'
    })
    .then(res => {
        this.setData({
          subImages: res.data.subImages || []
        })
    })
    .catch(err => {
      console.error('加载副图出错:', err)
      wx.showToast({
        title: '加载副图出错',
        icon: 'none'
      })
    })
  },

  // 选择器变化
  handlePickerChange(e) {
    const index = e.detail.value
    this.loadCommodityDetails(index)
  },

  // 上一页
  prevPage() {
    if (this.data.currentPage > 0) {
      this.setData({
        currentPage: this.data.currentPage - 1
      })
    }
  },

  // 下一页
  nextPage() {
    if (this.data.currentPage < this.data.totalPages - 1) {
      this.setData({
        currentPage: this.data.currentPage + 1
      })
    }
  },

  // 上一个商品
  prevCommodity() {
    if (this.data.currentIndex > 0) {
      this.loadCommodityDetails(this.data.currentIndex - 1)
    }
  },

  // 下一个商品
  nextCommodity() {
    if (this.data.currentIndex < this.data.commodityList.length - 1) {
      this.loadCommodityDetails(this.data.currentIndex + 1)
    }
  },
  
  // 计算当前页显示的图片
  get currentPageImages() {
    const { subImages, currentPage, pageSize } = this.data
    const start = currentPage * pageSize
    return subImages.slice(start, start + pageSize)
  },
  
  // 计算总页数
  get totalPages() {
    const { subImages, pageSize } = this.data
    return Math.ceil(subImages.length / pageSize)
  },

  onPreviewImage(e) {
    console.log('点击事件：', e);
    const current = e.currentTarget.dataset.src;
    console.log('预览地址：', current);
  
    if (!current) {
      wx.showToast({ title: '无效图片', icon: 'none' });
      return;
    }
  
    wx.previewImage({
      current,
      urls: [current]
    });
  }
})